<template>
    <view class="content" v-if="isShow">
        <view class="bg"></view>
        
        <view class="box">
            <view class="item">
                <view class="grey">订单编号</view>
                <view class="item-right">{{data.out_trade_no}}</view>
            </view>
            <view class="item">
                <view class="grey">下单日期</view>
                <view class="item-right">{{data.create_time}}</view>
            </view>
            <view class="item">
                <view class="grey">发货方</view>
                <view class="item-right">{{data.shipper}}</view>
            </view>
            <view class="item">
                <view class="grey">联系人</view>
                <view class="item-right">{{data.shipper_contact}}</view>
            </view>
            <view class="item">
                <view class="grey">联系方式</view>
                <view class="item-right">{{data.shipper_phone}}</view>
            </view>
            <view class="item">
                <view class="grey">装车地点</view>
                <view class="item-right">{{data.loading_site}}</view>
            </view>
            <view class="item">
                <view class="grey">收货地址</view>
                <view class="item-right">{{data.address}}</view>
            </view>
            <view class="item">
                <view class="grey">经营位置</view>
                <view class="item-right">{{data.position}}</view>
            </view>
            <view class="item">
                <view class="grey">联系人</view>
                <view class="item-right">{{data.recipient_contact}}</view>
            </view>
            <view class="item">
                <view class="grey">联系方式</view>
                <view class="item-right">{{data.recipient_phone}}</view>
            </view>
			<view class="item">
			    <view class="grey">发车时间</view>
			    <view class="item-right">{{data.start_date}} {{data.start_time}}</view>
			</view>
            <view class="item" v-if="data.carriage">
                <view class="grey">车厢位置</view>
                <view class="item-right">{{data.carriage}}</view>
            </view>
            <view class="item" v-if="data.ask">
                <view class="grey">卸车要求</view>
                <view class="item-right">{{data.ask}}</view>
            </view>
            <view class="item" v-if="data.send_img">
                <view class="grey">发货图片</view>
                <view class="item-right2">
                    <image :src="data.send_img" class="img" @click="$previewImageSA(data.send_img)"></image>
                </view>
            </view>
        </view>
        
        <view class="box" v-for="(item, index) in data.goods" :key="index">
            <view class="item">
                <view class="grey">货物类型</view>
                <view class="item-right">{{item.type}}</view>
            </view>
            <view class="item">
                <view class="grey">产品名称</view>
                <view class="item-right">{{item.goods}}</view>
            </view>
            <view class="item" v-if="item.brand">
                <view class="grey">品牌</view>
                <view class="item-right">{{item.brand}}</view>
            </view>
            <view class="item" v-if="item.packages">
                <view class="grey">包装</view>
                <view class="item-right">{{item.packages}}</view>
            </view>
            <view class="item" v-if="item.model">
                <view class="grey">型号</view>
                <view class="item-right">{{item.model}}</view>
            </view>
            <view class="item">
                <view class="grey">件数</view>
                <view class="item-right">{{item.num}}件</view>
            </view>
            <view class="item" v-if="data.order_type == 1 && item.estimate_weight">
                <view class="grey">预估总重量</view>
                <view class="item-right">{{item.estimate_weight}}斤</view>
            </view>
            <view class="item">
                <view class="grey">发货实际件数</view>
                <view class="item-right">{{item.send_num}}件</view>
            </view>
            <view class="item" v-if="data.order_type == 1 && item.send_weight">
                <view class="grey">发货实际重量</view>
                <view class="item-right">{{item.send_weight}}斤</view>
            </view>
            <view class="item">
                <view class="grey">卸货实际件数</view>
                <view class="item-right">
                    <input type="number" v-model="item.unload_num" placeholder="请输入" class="inp" :disabled="disabled">
                    <text class="u-p-l-10">件</text>
                </view>
            </view>
            <view class="item" v-if="data.order_type == 1">
                <view class="grey">{{ item.freight_type == 3 ? '卸货实际体积' : '卸货实际重量' }}</view>
                <view class="item-right" v-if="item.freight_type != 3">
                    <input type="digit" v-model="item.unload_weight" placeholder="请输入" class="inp" :disabled="disabled">
                    <text class="u-p-l-10">斤</text>
                </view>
				<view class="item-right" v-else>
				    <input type="digit" v-model="item.unload_volume" placeholder="请输入" class="inp" :disabled="disabled">
					<text class="u-p-l-10">m³</text>
				</view>
            </view>
			
			<!-- goods_status=1正常 2取消 3异常 -->
			<view class="item">
			    <view class="grey"></view>
			    <view class="item-right">
					<view @click="chooseGoodsStatus(item)">
						<u-icon name="checkmark-circle-fill" color="#2979ff" size="40" v-if="item.goods_status == 1"></u-icon>
						<u-icon name="checkmark-circle" size="38" v-else></u-icon>
						<text class="u-p-l-10">正常</text>
					</view>
					<view class="u-p-l-70" @click="chooseGoodsStatus(item)">
						<u-icon name="checkmark-circle-fill" color="#2979ff" size="40" v-if="item.goods_status == 3"></u-icon>
						<u-icon name="checkmark-circle" size="38" v-else></u-icon>
						<text class="u-p-l-10">异常</text>
					</view>
				</view>
			</view>
			<template v-if="item.goods_status == 3">
				<view class="u-p-t-20">
				    <view class="grey u-p-b-20">异常原因</view>
				    <textarea v-model="item.goods_reason" placeholder="请输入异常原因" class="t-inp" :disabled="disabled"></textarea>
				</view>
				<view class="u-p-t-20">
				    <view class="grey">上传异常图片</view>
				    <image :src="item.abnormal_img || '../../static/image/up.png'" class="up" @click.stop="chooseImage(item)"></image>
				</view>
			</template>
        </view>
        
        <view class="box">
            <view class="item">
                <view class="grey">客户取走图片</view>
                <view class="item-right2">
					<image :src="remove_img || '../../static/image/up.png'" class="up" @click="chooseRemoveImage"></image>
                </view>
            </view>
        </view>
		
		<view class="box" v-if="data.order_type == 2">
		    <view class="item">
		        <view class="grey">总运费</view>
		        <view class="f-price">
		            ￥<text class="f-price-num">{{data.order_amount}}</text>
		        </view>
		    </view>
		</view>
        
        <view class="d-btn" v-if="data.status != 5" @click="$noMultipleClicks(doSubmit)">卸车完成</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick: true,//连点
				isShow: false,
				out_trade_no: '',
				data: {},
				remove_img: '',//客户取走图片
				remove_id: '',
				disabled: false,
            };
        },
        onLoad(option) {
			this.out_trade_no = option.out_trade_no
			this.getData()
        },
		onShow() {
			
		},
        methods: {
			
			chooseGoodsStatus(item) {
				if (this.data.status != 5) {
					item.goods_status = item.goods_status == 1 ? 3 : 1
				}
			},
			
            doSubmit() {
				let isNull = false, data = []
				this.data.goods.forEach(cur => {
					if (this.data&&this.data.order_type == 1) {
						if (!cur.unload_num || (cur.freight_type != 3 && !cur.unload_weight) || (cur.freight_type == 3 && !cur.unload_volume)) {
							isNull = true
							console.log(1)
						}
					} else {
						if (!cur.unload_num) {
							isNull = true
							console.log(2)
						}
					}
					
					if (cur.goods_status == 3) {
						if (!cur.goods_reason || !cur.abnormal_id) {
							isNull = true
							console.log(3)
						}
					}
				})
				if (isNull) {
					this.$toast('请将货物明细或异常信息填写完整！')
					return
				}
				this.data.goods.forEach(cur => {
					data.push({
						id: cur.id,//
						unload_num: cur.unload_num,//卸货实际件数
						unload_weight: cur.unload_weight,//卸货实际重量
						unload_volume: cur.unload_volume,//卸货实际体积
						goods_status: cur.goods_status,//1正常 3异常
						goods_reason: cur.goods_reason,//异常原因
						abnormal_id: cur.abnormal_id,//异常图片id
					})
				})
				
				if (!this.remove_id) {
					this.$toast('请上传客户取走图片')
					return
				}
				this.$ajax('unload_finish', {
					user_token: this.$getSync('userToken'),
					order_id: this.data.order_id,//订单id
					remove_id: this.remove_id,//客户取走图片id
					data: data,//
				}).then(ret => {
					if (ret.success == 1000) {
						if (this.data.pay_status == 1) {
							// pay_status=1 未支付
							uni.showModal({
								title: '通知',
								content: '运单结算待卸货管理员核对订单实际重量件数后，进入订单-待支付中结算支付',
							    confirmText: '去支付',
								cancelText: '继续卸车',
								success: (res) => {
									if (res.confirm) {
										this.$cTo(`/pages/pay/pay?order_id=${this.data.order_id}`)
									} else if (res.cancel) {
										console.log('用户点击取消');
										// 扫码
										uni.scanCode({
											success: (res) => {
												console.log(res)
												this.out_trade_no = res.result
												this.getData()
											},
										    fail: err => {
										        console.log(err)
												this.$backT()
										    }
										});
									}
								}
							});
						} else {
							uni.showModal({
								title: '通知',
								content: '是否继续卸车？',
								success: (res) => {
									if (res.confirm) {
										// 扫码
										uni.scanCode({
											success: (res) => {
												console.log(res)
												this.out_trade_no = res.result
												this.getData()
											},
										    fail: err => {
										        console.log(err)
												this.$backT()
										    }
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
										this.$backT()
									}
								}
							});
							
						}
					} else {
						this.$toast(ret.msg);
					}
				});
            },
			
			chooseImage(item) {
				if (this.data.status != 5) {
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
					    success: (res) => {
					        this.$upLoadPic(res.tempFilePaths[0]).then(ret => {
					            console.log(ret)
								let data = ret.detail
								item.abnormal_id = data.image_id
								item.abnormal_img = data.image
					        });
					    }
					});
				} else {
					this.$previewImageSA(item.abnormal_img)
				}
			},
			
			// 上传客户取走图片
			chooseRemoveImage() {
				if (this.data.status != 5) {
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
					    success: (res) => {
					        this.$upLoadPic(res.tempFilePaths[0]).then(ret => {
					            console.log(ret)
								let data = ret.detail
								this.remove_id = data.image_id
								this.remove_img = data.image
					        });
					    }
					});
				} else {
					this.$previewImageSA(this.remove_img)
				}
			},
			
			getData() {
				this.$ajax('orders_detail', {
					user_token: this.$getSync('userToken'),
					out_trade_no: this.out_trade_no,//订单id（只有这里传订单号）
				}).then(ret => {
					if (ret.success == 1000) {
						this.data = ret.detail
						if (this.data.status == 5) {
							//status=5已卸货
							this.remove_img = this.data.remove_img
							this.disabled = true
						}
						this.isShow = true
					} else {
						this.$toast(ret.msg);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
    .privacy-pop {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .privacy-pop-box {
        width: 700rpx;
        padding: 40rpx 20rpx 20rpx;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 20rpx;
        position: relative;
    }
    .close-01{
        position: absolute;
        right: 20rpx;
        top: 20rpx;
    }
    .privacy-title {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        padding: 0 0 40rpx;
    }
    .t-inp{
        width: 100%;
        background-color: #f5f6fa;
        border-radius: 10rpx;
        padding: 20rpx;
    }
    .btn-text2{
        font-size: 30rpx;
        color: #fff;
        background-color: #00457f;
        padding: 20rpx 50rpx;
        border-radius: 20rpx;
        margin: 20rpx;
        text-align: center;
    }
    
    .up{
        width: 187rpx;
        height: 187rpx;
        margin-top: 20rpx;
    }
    .d-btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        background-color: #00457f;
        padding: 25rpx;
        border-radius: 50rpx;
        margin: 40rpx 0;
    }
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx;
    }
    .bg {
    	width: 100%;
    	height: 600rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #004580,#18568c, #f2f4fa);
    }
    .title{
        padding: 10rpx 0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        color: #fff;
    }
    .top-icon{
        width: 69rpx;
        height: 69rpx;
        margin-right: 20rpx;
    }
    .dest{
        font-weight: bold;
    }
    
    .box{
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
    }
    .route{
        padding: 10rpx 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .line{
        width: 31rpx;
        height: 162rpx;
        margin-right: 15rpx;
    }
    .route-r{
        flex: 1;
        font-size: 34rpx;
        font-weight: bold;
    }
    .address{
        font-size: 28rpx;
        color: #999999;
        font-weight: normal;
    }
    
    .work-title{
        font-size: 32rpx;
        font-weight: bold;
        padding-top: 10rpx;
        padding-bottom: 15rpx;
    }
    .item{
        padding: 15rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .item-right{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text-align: right;
        font-weight: bold;
        padding-left: 30rpx;
    }
    .text{
        word-break: break-all;
        white-space: pre-line;
        padding-top: 5rpx;
    }
    .grey{
        color: #656565;
    }
    .list-title{
        font-size: 34rpx;
        color: #fff;
        background: linear-gradient(to right, #7fb1e4, #c7e1f9);
        border-radius: 20rpx;
        padding: 15rpx 30rpx;
        height: 120rpx;
        margin-bottom: -40rpx;
    }
    .price{
        padding: 25rpx 0 10rpx;
        border-top: 2rpx solid #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 28rpx;
    }
    .price-num{
        font-size: 40rpx;
        font-weight: bold;
        padding-left: 10rpx;
        padding-right: 5rpx;
    }
    
    .pt-box{
        padding: 35rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icon-02{
        width: 55rpx;
        height: 55rpx;
        margin-right: 15rpx;
    }
    .pt-t1{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 20rpx;
    }
    .pt-t2{
        font-size: 22rpx;
        color: #929292;
    }
    .pt-t3{
        font-size: 22rpx;
        color: #ff5f2b;
    }
    
    .l-icon{
        width: 30rpx;
        height: 30rpx;
        background-color: #ff4926;
        border-radius: 10rpx;
        font-size: 20rpx;
        color: #fff;
        text-align: center;
        line-height: 30rpx;
        margin-right: 10rpx;
    }
    .item-right2{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
    .img{
        width: 240rpx;
        height: 170rpx;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .tip{
        color: #fe6a00;
        font-weight: normal;
    }
    
    
    .footer{
        width: 750rpx;
        height: 120rpx;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 9;
    }
    .f-top{
        height: 50rpx;
        background-color: #ddebfa;
        font-size: 25rpx;
        color: #0c89ea;
        line-height: 50rpx;
        text-align: right;
        padding-right: 35rpx;
    }
    .f-down{
        padding: 15rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .f-price{
        color: #ff3f00;
        padding-left: 15rpx;
    }
    .f-price-num{
        font-size: 38rpx;
        font-weight: bold;
    }
    .f-tip{
        font-size: 22rpx;
        color: #656565;
        padding-top: 5rpx;
    }
    .f-tip-t{
        color: #000;
    }
    .f-btn{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 35rpx;
        background-color: #00457f;
        border-radius: 50rpx;
    }
    .btns{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 15rpx;
    }
    .btn{
        color: #fff;
        padding: 15rpx 50rpx;
        background-color: #00457f;
        border-radius: 50rpx;
    }
	.btn-zc{
		background-color: #f59535;
	}
    
    // 优惠券
    .pop-box-cou{
        padding: 0 30rpx;
    }
    .pop-title{
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding: 30rpx;
    }
    .pop-item{
        position: relative;
        margin-bottom: 20rpx;
    }
    .cou-bg{
        width: 694rpx;
        height: 176rpx;
    }
    .item-cou{
        width: 670rpx;
        height: 165rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 20rpx;
        top: 0;
    }
    .item-cou-l{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ff602c;
    }
    .cou-num{
        font-size: 44rpx;
        font-weight: bold;
    }
    .item-cou-r{
        padding-left: 70rpx;
        padding-right: 15rpx;
        flex: 1;
    }
    .cou-time{
        font-size: 24rpx;
        color: #8b8b8b;
    }
    .pop-cou-none{
        font-size: 30rpx;
        color: #9b9b9b;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 100rpx;
    }
    .price-04{
        width: 92rpx;
        height: 79rpx;
        margin-bottom: 20rpx;
    }
    

</style>
